<!-- subpkg_consult/department/index.vue -->
<script setup>
	import { ref, computed } from 'vue'
	import { departmentListApi } from '@/services/consult.js'
	defineProps({
		type: String,
		illnessType: String,
	})
	const departmentList = ref([])
	const getDepartmentList = async () => {
		const { code, data, message } = await departmentListApi()
		if (code !== 10000) return uni.utils.toast(message)
		departmentList.value = data
	}
	getDepartmentList()
	const tabIndex = ref(0)
	const onTopDeparmentClick = (index) => {
		tabIndex.value = index
	}
	const childDepartmentList = computed(() => {
		return departmentList.value[tabIndex.value]?.child
	})
</script>

<template>
	<view class="department-page">
		<scroll-view scroll-y class="department-primary">
			<view
				:class="{ active: tabIndex === index }"
				class="department-item"
				v-for="(department, index) in departmentList"
				:key="department.id"
				@click="onTopDeparmentClick(index)"
				>{{ department.name }}</view
			>
			<view class="department-item"></view>
		</scroll-view>
		<scroll-view class="department-secondary">
			<navigator
				v-for="childDepartment in childDepartmentList"
				:key="childDepartment.id"
				hover-class="none"
				:url="`/subpkg_consult/description/index?type=${type}&illnessType=${illnessType}&depId=${childDepartment.id}`"
				class="department-item"
			>
				{{ childDepartment.name }}
			</navigator>
		</scroll-view>
	</view>
</template>

<style lang="scss">
	@import './index.scss';
</style>
